<!DOCTYPE html>
<html lang="en">
<head>
    <title>${title}</title>
    <meta name=”keywords” content=”${keywords}”/>
    <meta name="description" content="${description}"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstrap-css -->

    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/style.css" type="text/css" media="all"/>

    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->
    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
<!--banner-->
@include("../_header.html",{current:'APP'}){}
<div class="visible-lg-block visible-md-block"
     style=" background: url(${app.bannerPic}) no-repeat 0px 0px;background-size: cover;height: 570px">
</div>
<div class="banner-top visible-xs-block visible-sm-block"
     style="height: 300px;background: url(${app.mobileBannerPic}) no-repeat 0 ;background-size: cover ">
</div>
<!--//banner-->

<div class="container-fluid" style="background-color: #EEEEEE;padding: 0">
    <div class="container" style="margin-top: 10px;position: relative;">
        <div class="col-md-3 visible-md-block visible-lg-block" style="position: static">
            <div id="detail" style="z-index: 999;width: 200px;opacity: 0.8">
                <div style="background-color:#f8f8f8;color: #3a3a3a;">
                    <div style="font-weight: 400;font-size: 18px; text-align:center;line-height:35px;background-color: #50c9a0;">
                        <span style="color: white">下载APP</span>
                    </div>
                    <div style="width: 100%;">
                        <img src="${app.codeImg}" style="width: 100%">
                    </div>
                </div>
                @include("../container_left.html"){}
            </div>
        </div>
        <div class="col-md-9">
            <div class="visible-lg-block visible-md-block" style="height: 40px;width: 100%;line-height: 40px">
                <div style="display: inline-block;border-left:8px solid #50c9a0;padding-left: 8px;height: 35px">
                    <span style="margin: 0;font-size: 21px;color: #474747">逸身轻APP</span></div>
                <!--面包屑 -->
                <div style="display: inline-block;float: right">
                    <ul style="list-style: none">
                        <li style="display: inline-block;">
                            <span style="color:#464646 ">您当前的位置：</span>
                            <a href="/index"
                               style="color: #464646; text-decoration: none;font-family: 'Roboto', sans-serif;">首页</a>
                            <span style="color:#464646 "> &nbsp>>&nbsp </span>
                        </li>
                        <li style="display: inline-block;color: #464646;font-family: 'Open Sans', sans-serif;letter-spacing: 1px">
                            APP
                        </li>
                    </ul>
                </div>
                <!--//面包屑 -->
            </div>
            <div class="visible-xs-block visible-sm-block" style="width: 100%;margin-bottom: 10px">
                <img src="${app.codeImg}" style="width: 100%">
            </div>
            <div style="width: 100%;margin-bottom: 60px">
                <img src="${app.detailImg}" style="width: 100%">
            </div>
        </div>
    </div>
    <script>
        var left = $("#detail");
        var win = $(window); //得到窗口对象
        var sc = $(document);//得到document文档对象
        win.scroll(function () {
            var t2 = document.documentElement.scrollHeight;
            var t1 = document.documentElement.scrollTop ;
            var b = t2-t1;
            console.log("距离底部距离："+ b);
            navScroll(b);
        });

        function navScroll(bottom) {
            if (sc.scrollTop() >= 500) {
                if(bottom<1150){
                    left.addClass("left_relative");
                    left.removeClass("left_nav_class");
                }else{
                    left.addClass("left_nav_class");
                    left.removeClass("left_relative")
                    if (win.width < 768) {
                        left.animate({display: 'none'}, 0)
                    }
                }
            } else {
                left.removeClass("left_relative");
                left.removeClass("left_nav_class");
            }

        }
    </script>
</div>

<!-- footer -->
@include("../_footer.html"){}
<!-- //footer -->

<script src="${ctxPath}/static/js/jarallax.js"></script>
<script src="${ctxPath}/static/js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<script src="${ctxPath}/static/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
<!-- //here ends scrolling icon -->

</body>
</html>